<template>
  <!-- 右边部分 -->
  <div class="listright">
    <div class="thefirstrow">
      <h3 class="handleline">
        <span class="handlelinege">入驻歌手</span>
        <span class="more">更多 ></span>
      </h3>
      <div class="image">
        <ul class="imagebox">
          <li v-for="item in hotList" :key="item.id">
            <div class="imageimage">
              <router-link to="/discover/artist/artistlist" :title="item.name">
                <img class="imagemao" :src="item.album.blurPicUrl" alt="" />
              </router-link>
              <p class="imagename">
                <router-link to="" class="imagenamename">{{
                  item.artists[0].name
                }}</router-link>
                <router-link
                  to=""
                  class="el-icon-user"
                  title=" item.artists[0].name"
                ></router-link>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'Singe',
  methods: {
    // vux数据逻辑
    ...mapActions('hotlist', ['getHotList'])
  },
  mounted() {
    const data = this.getHotList()
    console.log(data)
  },
  computed: {
    ...mapState('hotlist', ['hotList'])
  }
}
</script>

<style lang="less"></style>
